<template>
  <div class="p32">
    <div class="teble-header-btns flex">
      <Button class="cancle-btn-border flex">
        <Icon type="ios-add-circle-outline" size="20" />
        <span>增减员计划</span>
      </Button>
      <div class="right">
        <Button class="save-btn-green mr12" @click="add">添加次月账单</Button>
        <Button class="mr12 pierced">导入历史参保记录</Button>
        <Dropdown>
          <Button class="pierced">
            更多功能
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>重置社保公积金数据</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>

    <div class="table-wrap">
      <Table width="100%" :columns="columns" :data="data4" class></Table>
    </div>

    <!-- next modal -->
    <Modal v-model="modal2" width="360">
      <p slot="header" style="font-weight:bold;">添加次月账单</p>
      <div class="m-c-content">
        <p class="star">添加次月账单会默认根据上月参保人账单和增减员计划，智能计算</p>
        <div class="f-table-wrap">
          <div class="h">计算结果</div>
          <div class="c-t">
            <div class="c-t-item">
              <div class="key">参保月份</div>
              <div class="value">2020年8月</div>
            </div>
            <div class="c-t-item">
              <div class="key">参保人数</div>
              <div class="value">--</div>
            </div>
            <div class="c-t-item">
              <div class="key">企业缴费</div>
              <div class="value">--</div>
            </div>
            <div class="c-t-item">
              <div class="key">个人缴费</div>
              <div class="value">--</div>
            </div>
            <div class="c-t-item">
              <div class="key">合计</div>
              <div class="value red">--</div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <div class="m-c-footer flex">
          <div class="m-c-left">
            <!-- <span>没有找到想要的项目？ </span>
            <span class="ml12"><a href="">去添加项目</a></span>-->
          </div>
          <div class="m-c-right">
            <Button @click="cancel" class="no-border-btn">关闭</Button>
            <Button class="save-btn-green" @click="confirm">查看详情</Button>
          </div>
        </div>
      </div>
    </Modal>
    <!-- next modal end -->
  </div>
</template>
<script>
import { insuredced } from "@/apis";
import http from "@/utils/http";
export default {
  data() {
    return {
      modal2: false,
      columns: [
        {
          title: "参保月份",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  class: "table-cell-bold",
                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                "2020年07月"
              )
            ]);
          }
        },
        {
          title: "参保人数",
          key: "age"
        },
        {
          title: "社保缴费",
          key: "province"
        },
        {
          title: "公积金缴费",
          key: "city"
        },
        {
          title: "本月增员人数",
          key: "city"
        },
        {
          title: "本月停保人数",
          key: "city"
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            let _this = this;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      _this.delete(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data4: [
        {
          name: "2020年7月",
          age: "--",
          address: "--",
          province: "--",
          selection: "--",
          avatar: "--",
          city: "--",
          zip: 100000
        },
        {
          name: "2020年7月",
          age: "--",
          address: "--",
          province: "--",
          selection: "--",
          avatar: "--",
          city: "--",
          zip: 100000
        }
      ]
    };
  },
  methods: {
    cancel() {
      this.modal2 = false;
    },
    detail() {
      this.modal2 = false;
      this.$router.push("/socialsecurity/insurance/monthly");
    },
    add() {
      this.modal2 = true;
    },
    confirm() {},
    getList() {
      http.get(insuredced.insuredlist, {}).then(res => {
        let list = res.data.list.data || [];
        this.list = list;
      });
    },
    delete(e) {
      this.$Modal.confirm({
        title: "删除账单",
        content: "<p>确定删除“"+e.id+"”账单？</p>",
        onOk: () => {
          http.get(insuredced.insuredlist, {}).then(res => {
            let list = res.data.list.data || [];
            this.list = list;
          });
        },
        onCancel: () => {
          // this.$Message.info("Clicked cancel");
        }
      });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style lang="scss" scoped src="./index.scss">
</style>